<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="Xenon Boostrap Admin Panel"/>
    <meta name="author" content=""/>

    <title>校园e商</title>
    <link rel="stylesheet" href="/public/css/fonts/linecons/css/linecons.css">
    <link rel="stylesheet" href="/public/css/fonts/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/public/css/bootstrap.css">
    <link rel="stylesheet" href="/public/css/xenon-core.css">
    <link rel="stylesheet" href="/public/css/xenon-forms.css">
    <link rel="stylesheet" href="/public/css/xenon-components.css">
    <link rel="stylesheet" href="/public/css/xenon-skins.css">
    <link rel="stylesheet" href="/public/css/custom.css">
    <link rel="stylesheet" href="/public/js/bootstrap-select/css/bootstrap-select.min.css">


    <script src="/public/js/jquery-1.11.1.min.js"></script>
    <script src="/public/js/bootstrap.min.js"></script>
    <script src="/public/js/TweenMax.min.js"></script>
    <script src="/public/js/resizeable.js"></script>
    <script src="/public/js/joinable.js"></script>
    <script src="/public/js/xenon-api.js"></script>
    <script src="/public/js/xenon-toggles.js"></script>
    <script src="/public/js/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script src="/public/js/xenon-widgets.js"></script>
    <script src="/public/js/devexpress-web-14.1/js/globalize.min.js"></script>
    <script src="/public/js/devexpress-web-14.1/js/dx.chartjs.js"></script>

    <script src="/public/js/daterangepicker/daterangepicker.js"></script>
    <script src="/public/js/datepicker/bootstrap-datepicker.js"></script>
    <script src="/public/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>


    <script type="text/javascript" src="/public/laypage/laypage.js"></script>


    <!-- JavaScripts initializations and stuff -->
    <script src="/public/js/xenon-custom.js"></script>
    <script src="/public/js/ulmsale/common.js"></script>
    <script src="/public/lib/layer/js/layer.js"></script>

    <script>

        $(function () {
            // 分页
            laypage({
                cont: $('#layerPage'), //容器。值支持id名、原生dom对象，jquery对象,
                pages: '${resultPage?.pageCount}', //总页数
                skin: 'yahei',
                curr:'${pageNumber}',
                jump: function(e, first){ //触发分页后的回调
                    if(!first){ //一定要加此判断，否则初始时会无限刷新
                        $('#pageNumber').val(e.curr);
                        $("#searchForm").attr("action", "/admin/product/popProduct/"+e.curr);
                        $('#searchForm').submit();
                    }
                }
            });
            $(document).on("click", "#searchBtn", function(){
                $("#searchForm").attr("action", "/admin/product/popProduct/1");
                $('#searchForm').submit();
            })


        });

        function checkProduct(id, name , price ) {
            window.parent.callBack(id, name ,price);
        }

    </script>
</head>
<body class="page-body" style="background: #ffffff;">

<div class="panel panel-default">
    <form method="get" id="searchForm" action="/admin/product/popProduct/${pageNumber}">
        <div style="margin-bottom: 20px;width:160px;float: left;">
            <input type="text" name="merchantName" id="code" class="form-control" style="width:150px" placeholder="商户名称"
                   value="${merchantName}">
        </div>
        <div style="margin-bottom: 20px;width:160px;float: left;">

                <select id="parentTypeId" name="parentType" class="form-control" style="width: 120px" onchange="getTwoType()" >
                    <option value="">--商品大类--</option>
                #{list parentTypeList , as : 'parentTypes'}
                    <option value="${parentTypes?.id}"  #{if parentTypes?.id == parentType}
                            selected #{/if}> ${parentTypes?.name} </option>
                #{/list}
                </select>
        </div>
        <div style="margin-bottom: 20px;width:160px;float: left;">
                <select id="id_typeId" name="productType"  class="form-control" style="width: 120px" >
                    <option value="">--商品小类--</option>
                        #{list typeList , as : 'type'}
                            <option value="${type?.id}" #{if type?.id == productType}
                                    selected #{/if} >${type?.name} </option>
                        #{/list}
                </select>
        </div>
        <div style="margin-bottom: 20px;width:160px;float: left;">
            <input type="text" name="name" id="code" class="form-control" style="width:150px" placeholder="产品名称"
                   value="${name}">
        </div>

    </form>
    <button class="btn btn-turquoise" id="searchBtn">开始检索</button>
    <div class="panel-body">
        <table id="idBussiness" class="table table-bordered table-striped" style="text-align:left; width: 100%">
            <thead>
            <tr>
                <th>商户</th>
                <th>所属大类</th>
                <th>所属小类</th>
                <th>名称</th>
                <th>简称</th>
                <th>价格</th>
                <th>库存</th>
                <th>上架状态</th>
            </tr>
            </thead>
            <tbody class="middle-align">
            #{paginate.list items:resultPage , as :'product'}
            <tr ondblclick="checkProduct('${product?.id}','${product?.name}' , '${product?.merchantPrice}')">
                <td>${product?.merchant?.name}</td>
                <td>${product?.parentType?.name}</td>
                <td>${product?.productType?.name}</td>
                <td>${product?.name}</td>
                <td>${product?.shortName}</td>
                <td>${product?.merchantPrice}</td>
                <td>${product?.stock}</td>
                <td>&{'ProductStatus.'+product?.productStatus}</td>
            </tr>
            #{/paginate.list}

            </tbody>
        </table>
        <div id="layerPage" class="col-xs-12"></div>
    </div>
</div>
</body>
<script>
    function getTwoType(id){
        var parentTypeId = $('#parentTypeId').val();
        $("#id_typeId").empty();
        $.getJSON("/BS0019/admin/product/secondLevel", {id: parentTypeId},
                function (data) {
                    console.log(data,data)
                    if(data.list.length > 0){
                        $.each(data.list,function(index,value){
                            $("#id_typeId").append("<option value='"+value.id+"'>"+value.name+"</option>");
                        })
                    }else{
                        $("#id_typeId").append("<option value=''>--请选择--</option>");
                    }

                })
    }

</script>
</html>


